<ion-header>
    <header-component>
        <ion-toolbar>
            <ion-buttons class="button-left">
            </ion-buttons>
            <ion-title>告警</ion-title>
        </ion-toolbar>
    </header-component>
</ion-header>
<alarm-tab [functionList]="functionList" (changeAlarmTab)="changeAlarmTab($event)" [state]="state"></alarm-tab>

<ion-content>

    <ion-refresher (ionRefresh)="doRefresh($event.target)">
        <ion-refresher-content pullingText="加载最新{{state=='alarm'?'告警':state=='fireAlarm'? '消防告警': '事件'}}数据">
        </ion-refresher-content>
    </ion-refresher>
    <div *ngIf="state ==='alarm'">
        <div class="alarm_item_dt">
            <alarm-item [alarmDatas]="alarmDatas" (showPopup)="showPopup($event)" (watchVideo)="watchVideo($event)" [permission]="fireAlarmPermission"></alarm-item>
        </div>
        <div *ngIf="!hasData" class="no-alarm">暂无告警记录</div>
        <p *ngIf="IsILastPage" style="text-align: center;">没有更多了</p>
        <ion-infinite-scroll *ngIf="!IsILastPage" (ionInfinite)="loadData('load',$event.target)">
            <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..."></ion-infinite-scroll-content>
        </ion-infinite-scroll>
    </div>
    <div *ngIf="state ==='fireAlarm'">
        <fires-alarm [fireAlarms]="fireAlarms" [permission]="fireAlarmPermission"></fires-alarm>
    </div>
    <div *ngIf="state ==='event'">
        <div class="event_items_dt">
            <div class="event_item" *ngFor="let event of eventDatas">
                <span>
                    <img [imgStateUrl]='"assets/imgs/device/"+event.deviceTypeCode+".png"' imgDefault="assets/imgs/device/default.png">
                </span>
                <span>
                    <p>{{ event.areaName + '#' +event.deviceName + "#" + event.alarmName }}</p>
                </span>
                <span>
                    <p>{{ event.createTime | DateFormat }}</p>
                </span>
            </div>
        </div>

        <ion-infinite-scroll (ionInfinite)="loadData('load',$event.target)">
            <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..."></ion-infinite-scroll-content>
        </ion-infinite-scroll>
    </div>
</ion-content>

<ion-footer>
    <div class="data-count">共
        <span *ngIf=" state !=='fireAlarm'">&nbsp;{{ (state==='alarm'? alarmArresultLength : totalSize) || 0 }}&nbsp;</span>
        <span *ngIf="state ==='fireAlarm'">&nbsp;{{ fireAlarms.length || 0 }}&nbsp;</span> 条记录
    </div>
</ion-footer>